let section = document.getElementsByClassName('section')[0],
    option = section.getElementsByTagName('ul')[0],
    optionList = option.getElementsByTagName('li'),
    detailList = section.getElementsByClassName('detail'),
    lastIndex = 0; // 上一个选项的索引

let handleDetail = function handleDetail(curIndex, prevIndex) {
    // 能够走到这一步的肯定是detail中并没有active选项
    let curDetail = [].slice.call(detailList)[curIndex],
        prevDetail = [].slice.call(detailList)[prevIndex];
    curDetail.setAttribute('class', 'detail active');
    prevDetail.setAttribute('class', 'detail');
};

// 1. 对选项进行绑定[注意获取的是类数组]
[].forEach.call(optionList, (item, index) => {
    item.onclick = function anonymous() {
        // 2. 获取option的li的className值
        let getClassName = this.getAttribute('class');
        // 3. 如果值不为空 & 不为null则证明其有值active，这个时候点击不操作，即返回
        if ((getClassName != null) && (getClassName != ' ')) return;
        // 4. 如果为空 | 未定义则给它们设置className为active 
        this.setAttribute('class', 'active');
        // 5. 移除上次选择的选项卡
        optionList[lastIndex].setAttribute('class', ' ');

        // 6. 对detail进行操作
        handleDetail(index, lastIndex);

        // 将detail中的lastIndex进行更新
        lastIndex = index;
    };
});